<template>
	<view>
		<view class="status_bar">  
			<view class="top_view"></view>  
		</view> 
		<view class="search-header">
			<view class="h-left">
				<view class="showwho" @click="isshowchoose">
					<text class="showtext1" >{{names}}</text>
					<text v-bind:class="[isshow ? 'iconup':'icondown']"></text>
				</view> 
				<input type="text" class="inputs" v-model="searchval" placeholder="请输入您要查找的相关内容" confirm-type="search" @confirm="tosearch"/>
				<view class="searchbtn" @click="tosearch">&#xe613;</view>
			</view>
			<view class="h-right" @click="quxiao">取消</view>
		</view>
		<view class="h-nav"  v-if="isshow">
			<view class="bian"></view>
			<view class="forlistbox">
				<block v-for="(item,index) in list" :key="index">
					<view v-bind:class="['navlist',ischoosenub==index?'navactive':'']" :data-itemid="item.id" @click="choosefn(index)">{{item.name}}</view>
				</block>
			</view>
		</view>
		<view class="history" >
			<block v-for="(item,index) in datalist1" :key="index" v-if="datalist1.length>0">
				<view class="history-item" @click="todetail(index,1,1,item.id,item.picture,item.title)">
					<image class="his-img" :src="localurl+item.picture" v-if="item.picture"></image>
					<view :class="'his-title fontsize'+fontsizenub">{{item.title}}</view>
				</view>
			</block>
			<block v-for="(item,index) in datalist2" :key="index" v-if="datalist2.length>0">
				<view class="history-item" @click="todetail(index,2)">
					<image class="his-img" :src="localurl+item.picture" v-if="item.picture"></image>
					<view :class="'his-title fontsize'+fontsizenub">{{item.title}}</view>
				</view>
			</block>
			<block v-for="(item,index) in datalist3" :key="index" v-if="datalist3.length>0">
				<view class="history-item" @click="todetail(index,3,item.articleType,item.id)">
					<image class="his-img" :src="localurl+item.picture" v-if="item.picture"></image>
					<view :class="'his-title fontsize'+fontsizenub">{{item.title}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				history:[],
				searchval:'',
				who:'',
				ischoosenub:0,
				isshow:false,
				list:[],
				datalist1:[],
				datalist2:[],
				datalist3:[],
				localurl:common.csurl2,
				names:'全网'
			};
		},
		onLoad() {
			this.getlist()
		},
		methods:{
			choosefn(val){
				this.ischoosenub = val;
				this.names = this.list[val].name
				this.isshow = false;
			},
			isshowchoose(){
				this.isshow = !this.isshow;
			},
			quxiao(){
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			todetail(index,val,iszt,id,img,title){
				var that =this;
				if(val ==1){
					//到前沿专题二级页面
					uni.navigateTo({
						url: '/pages/qysecond/qysecond?id='+id+'&img='+img+'&title='+title
					});
				}else if(val ==2){
					console.log(that.datalist2[index].id)
					//专题三级直接跳转到详情页面
					var link = that.datalist2[index].link
					var	reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
					var wherefrom = reg.test(link)
					if(wherefrom){
						uni.navigateTo({
							url:'/pages/webview/webview?type=qyzt&id='+that.datalist2[index].id
						})
					}else{
						uni.navigateTo({
							url:'/pages/xq/xq?type=qyzt&id='+that.datalist2[index].id
						})
					}
				}else{
					//判断是否为专题
					if(iszt == 1){ //新闻
						//判定是否为http
						var link = that.datalist3[index].link
						var	reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
						var wherefrom = reg.test(link)
						if(wherefrom){
							uni.navigateTo({
								url:'/pages/webview/webview?type=index&id='+that.datalist3[index].id
							})
						}else{
							uni.navigateTo({
								url:'/pages/xq/xq?type=index&id='+that.datalist3[index].id
							})
						}
					}else{ //跳转专题的列表页面
						uni.navigateTo({
							url: '/pages/secondPage/secondPage?url='+id
						});
					}
					
				}
			},
			tosearch(){
				var theval = this.searchval.trim()
				if(theval){
				//	plus.nativeUI.showWaiting("搜索中...")
					uni.request({
						url:common.csurl2+'/api/search/result.json',
						data:{
							navigate:this.list[this.ischoosenub].foreignKey,
							search:theval
						},
						success:(res)=>{
							
							this.datalist1 = res.data['前沿一级']
							this.datalist2 = res.data['前沿三级']
							this.datalist3 = res.data['发布中心']
							//plus.nativeUI.closeWaiting();
						}
					})
				}
				
			},
			getlist(){
				uni.request({
					url:common.csurl2+'/api/newsCentre/navList.json',
					success:(res)=>{
						var ca= res.data;
						ca.unshift({"id":100000,"name":"全网","foreignKey":"0"})
						this.list = ca;
						//console.log(JSON.stringify(this.list))
					}
				})
			}
		},
		computed:{
			...mapState(['fontsizenub'])
		}
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('../../static/font/iconfont.ttf') format('truetype');
	}
	@include fontsizefn(".his-title",30upx);
	page{
		background-color: $bgcolor;
	}
	.search-header{
		position:fixed;
		left:0;
		top:var(--status-bar-height);
		background-color:#ffffff;
		height:88upx;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:flex-start;
		align-items:center;
		z-index:100;
		width:750upx;
	}

	.h-nav{
		position:fixed;
		left:24upx;
		top:128upx;
		z-index:101;
		width:200upx;
		text-align: center;
	}
	.forlistbox{
		background-color: #ffffff;
		border-radius:12upx;
		width:100%;
		padding:15upx 0;
		margin-top:-12upx;
	}
	.bian{
		display: inline-block;
		width:0;
		height:0;
		border: 12upx solid transparent;
		border-bottom-color:#ffffff;
		margin:0 auto;
	}
	.navlist{
		width:100%;
		height:70upx;
		line-height:70upx;
		font-size:30upx;
		color:#b5b5b5;
		text-align:center;
	}
	.navactive{
		color:$fontblue;
	}
	.h-right{
		font-size:32upx;
		color:#b5b5b5;
		width:120upx;
		text-align:center;
		margin:0 auto;
	}
	
	.h-left{
		flex:1;
		height:60upx;
		border-radius:35upx;
		margin:0upx 0upx 0 24upx ;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:flex-start;
		align-items:center;
		background:#f3f3f3;
		color:#b5b5b5;
		border:1px solid #e2e2e2;
	}
	.inputs{
		flex:1;
		font-size:30upx;
		line-height:60upx;
		color:#b5b5b5
	}
	.showwho{
		width:110upx;
		text-align:center;
		line-height:54upx;
		position:relative;
		margin-top:-6upx;
	}
	.showtext1{
		font-size:28upx;
		color:$fontblue;
		margin-right:10upx;
		
	}
	.icondown{
		display: inline-block;
		width:0;
		height:0;
		border: 10upx solid transparent;
		border-top-color:$fontblue;
		position:absolute;
		right:12upx;
		top:30upx;
		z-index:100;
	}
	.iconup{
		display: inline-block;
		width:0;
		height:0;
		border: 10upx solid transparent;
		border-bottom-color:$fontblue;
		position:absolute;
		right:12upx;
		top:20upx;
		z-index:100;
	}
	.searchbtn{
		width: 50upx;
		height: 88upx;
		line-height: 88upx;
		font-size: 34upx;
		color: $fontblue;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}
	
	
	
	.status_bar {  
		height: var(--status-bar-height);  
		width: 100%;  
		background-color: #ffffff;  
	}  
	.top_view {  
		height: var(--status-bar-height);  
		width: 100%;  
		position: fixed;  
		background-color: #ffffff;  
		top: 0;  
		z-index: 999;  
	}
	
	
	
	
	
	.history{
		padding:0 24upx;
		background:#fff;
		margin-top:24upx 0;
		margin-top:100upx;
	}
	.history-item{
		border-bottom:1px solid #ccc;
		padding:20upx 0;
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:flex-start;
		align-items:flex-start;
	}
	.his-img{
		width:240upx;
		height:135upx;
		margin-right:20upx;
		vertical-align:middle;
	}
	.his-title{
		flex:1;
		line-height:50upx;
		height:100upx;
		vertical-align:middle;
		color:$titlecolor;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.loadings {
		padding: 20upx 0;
		text-align:center;
		font-size:30upx;
		color:#ccc;
	}
</style>
